<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <title>租用房屋</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">


    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <link rel="shortcut icon" href="../img/favicon.ico">
    <script src="../plugins/tempjs/html5shiv.js"></script>
    <script src="../plugins/tempjs/respond.min.js"></script>

    <link rel="stylesheet" href="../css/public.css">

    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="../plugins/iCheck/square/blue.css">
    <link rel="stylesheet" href="../plugins/morris/morris.css">
    <link rel="stylesheet" href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet" href="../plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" href="../plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet" href="../plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="../plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet" href="../plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet" href="../plugins/select2/select2.css">
    <link rel="stylesheet" href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet" href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet" href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet" href="../plugins/bootstrap-slider/slider.css">
    <link rel="stylesheet" href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">

    <!--引入分页控件-->
    <link rel="stylesheet" href="../plugins/jQuery/pagination.css">

</head>

<body class="hold-transition skin-purple sidebar-mini">

<div class="wrapper">

    <!-- 头部+导航侧栏 -->
    <div id="page-head"></div>
    <!-- 头部+导航侧栏  /-->

    <!-- 内容区域 -->
    <div class="content-wrapper">

        <!-- 内容头部 -->
        <section class="content-header">
            <h1>
                开放房源
                <small>租用房屋</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="all-admin-index.html"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="all-order-manage-list.html">开放房源</a></li>
                <li class="active">租用房屋</li>
            </ol>
        </section>
        <!-- 内容头部 /-->

        <!-- 正文区域 -->
        <section class="content">


            <!-- .box-body -->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">列表</h3>
                </div>

                <div class="box-body">

                    <!--                    条件查询-->
                    <div class="row">

                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 条件查找
                            </div>
                            <div class="panel-body">

                                <div class="row">
                                    <!--        价格-->
                                    <div class="col-lg-5">
                                        <div class="form-horizontal">
                                            <div class="form-group">
                                                <div class="col-md-3 control-label" for="select">金额</div>
                                                <div class="col-md-5">
                                                    <input type="text" class="form-control" id="price1"
                                                           placeholder="价格"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-5">
                                        <div class="form-horizontal">
                                            <div class="form-group">
                                                <div class="col-md-2 control-label" for="select">日期</div>
                                                <div class="col-md-5">
                                                    <input type="text" id="inputDate1" class="form-control"
                                                           placeholder="选择开始日期"
                                                    >
                                                </div>
                                                <div class="col-md-5">
                                                    <input type="text" id="inputDate2" class="form-control"
                                                           placeholder="选择结束日期"
                                                    >
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-2"></div>
                                </div>


                                <div class="row">

                                    <div class="col-lg-5">
                                        <div class="form-horizontal">
                                            <div class="form-group">
                                                <div class="col-md-3 control-label" for="select">房屋类型</div>
                                                <div class="col-md-5">
                                                    <select ID="CustomersType" runat="server" AutoPostBack="True"
                                                            class="form-control">
                                                        <option Value="0">全部</option>
                                                        <option Value="1">普通住宅</option>
                                                        <option Value="2">公寓</option>

                                                    </select>
                                                </div>
                                                <div class="col-md-4">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--        评分-->
                                    <div class="col-lg-5">
                                        <div class="form-horizontal">
                                            <div class="form-group">
                                                <div class="col-md-2 control-label" for="select">评分</div>
                                                <div class="col-md-5">
                                                    <input type="text" class="form-control" id="score1"
                                                           placeholder="下限评分:0"/>
                                                </div>

                                                <div class="col-md-5">
                                                    <input type="text" class="form-control" id="score2"
                                                           placeholder="上线评分:5"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-2">
                                        <div class="form-horizontal">
                                            <div class="form-group">
                                                <div class="col-md-10">
                                                    <input type="button" id="btnSearch" value=" 筛 选 "
                                                           class="btn btn-success col-md-12 "/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <!--查询 按钮-->
                            </div>
                        </div>

                        <!--/col-->
                    </div>

                    <!-- 数据表格 -->
                    <div class="table-box">

                        <!--                       数据列表-->
                        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                            <thead>
                            <tr>
                                <th class="" style="padding-right:0px;">
                                    <input id="selall" type="checkbox" class="icheckbox_square-blue">
                                </th>
                                <th class="sorting_asc">ID</th>
                                <th class="sorting">房主姓名</th>
                                <th class="sorting">房屋地址</th>
                                <th class="sorting">金额</th>
                                <th class="sorting">发布时间</th>
                                <th class="sorting">房屋评分</th>

                                <th class="text-center">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <!--                                这里通过ajax异步加载-->
                            </tbody>

                        </table>
                        <!--数据列表/-->


                    </div>
                    <!-- 数据表格 /-->


                </div>
                <!-- /.box-body -->

                <!-- .box-footer-->
                <!--                分页控件测试-->
                <div class="box-tools pull-right">

                    <input type="hidden" id="totalPage" value="10">
                    <div class="m-style" id="box-paging"></div>
                    <!--                    <p>测试</p>-->
                </div>

                <div class="box-footer" id="setPageDiv">
                    <div class="pull-left">
<!--                        <div class="form-group form-inline">&nbsp;&nbsp;每页 10 条-->
<!--                        </div>-->
                    </div>
                </div>
                <!-- /.box-footer-->


            </div>

        </section>
        <!-- 正文区域 /-->

    </div>
    <!-- 内容区域 /-->

    <!-- 底部导航 -->
    <div id="page-footer"></div>
    <!-- 底部导航 /-->

</div>


<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugins/raphael/raphael-min.js"></script>
<script src="../plugins/morris/morris.min.js"></script>
<script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="../plugins/knob/jquery.knob.js"></script>
<script src="../plugins/daterangepicker/moment.min.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="../plugins/fastclick/fastclick.js"></script>
<script src="../plugins/iCheck/icheck.min.js"></script>
<script src="../plugins/adminLTE/js/app.min.js"></script>
<script src="../plugins/treeTable/jquery.treetable.js"></script>
<script src="../plugins/select2/select2.full.min.js"></script>
<script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script src="../plugins/ckeditor/ckeditor.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="../plugins/chartjs/Chart.min.js"></script>
<script src="../plugins/flot/jquery.flot.min.js"></script>
<script src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
<script src="../plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<!--引入分页pagination插件-->
<script type="text/javascript" src="../plugins/jQuery/jquery.pagination.js"></script>
<script>
    $(document).ready(function () {
        //装入头部
        $('#page-head').load('public-head.html', null, function () {
            setSidebarActive("public-rent");
        });
        //装入尾部
        $('#page-footer').load('public-footer.html');
        // 选择框
        $(".select2").select2();

        // WYSIHTML5编辑器
        $(".textarea").wysihtml5({
            locale: 'zh-CN'
        });
    });





    // 设置激活菜单
    function setSidebarActive(tagUri) {
        var liObj = $("#" + tagUri);
        if (liObj.length > 0) {
            liObj.parent().parent().addClass("active");
            liObj.addClass("active");
        }
    }


    $(document).ready(function () {
        // 列表按钮
        $("#dataList td input[type='checkbox']").iCheck({
            checkboxClass: 'icheckbox_square-blue',
            increaseArea: '20%'
        });
        // 全选操作
        $("#selall").click(function () {
            var clicks = $(this).is(':checked');
            if (!clicks) {
                $("#dataList td input[type='checkbox']").iCheck("uncheck");
            } else {
                $("#dataList td input[type='checkbox']").iCheck("check");
            }
            $(this).data("clicks", !clicks);
        });
    });
</script>
<script>
    //处理表格json的数据
    $(document).ready(function () {
        var pageTotalSize = 0;
        var flag = 1;
        getDataPage(1, 10); //初始化


        //调用后台数据
        function getDataPage(page, pageSize) {
            //发post请求
            $.ajax({
                url: "/house/houseRent/p=" + page,   //请求路径
                type: "post",    //请求方式，这里应该用post，返回给后台分页是数据：当前页，每页的大小
                data: encodeURIComponent(JSON.stringify(pageSize)),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",  //设置接收到数据类型
                success: function (data) {
                    // console.log(data);
                    // 处理分页数据
                    showTable(data);
                    if (flag >= 1) {
                        flag = 0;
                        var log = 0;
                        while (true) {
                            if (pageTotalSize == 0) {
                                sleep(100);
                                log++;
                            } else {
                                break;
                            }
                            if (log >= 50) {        //报错
                                alert("后台获取数据出现异常！请联系工作人员");
                                log = 0;
                                break;
                            }
                        }
                        // console.log("当前分页总个数：" + pageTotalSize);
                        getMsg();   //开始执行
                    }

                },    //成功
                error: function () {
                    console.log("出租信息访问出错啦...")
                }
            })

        }

        //睡眠
        function sleep(numberMillis) {
            var now = new Date();
            var exitTime = now.getTime() + numberMillis;
            while (true) {
                now = new Date();
                if (now.getTime() > exitTime)
                    return;
            }
        }

        //num:分页个数，data数据总个数
        function getMsg() {
            //分页功能
            // var total = parseInt($("#totalPage").val());    //分页的个数
            $('#box-paging').pagination({
                pageCount: pageTotalSize,
                current: 1, //首页节点
                coping: true,
                homePage: '1',
                endPage: '' + pageTotalSize,
                prevContent: '<',
                nextContent: '>',
                callback: function (api) {
                    var page = api.getCurrent();
                    console.log("当前页：" + page);
                    var pageSize = 10;
                    getDataPage(page, pageSize);
                }
            });

        }

        //（请先分页）将数据放入表格中
        function showTable(data) {
            var jsonData = JSON.parse(data);
            var unitList = "";
            if (jsonData.hasOwnProperty('pages')) {
                pageTotalSize = jsonData.pages;
                unitList = jsonData.list;
            }else{
                unitList = jsonData;
            }
            // console.log("后台返回的数据"+ jsonData.pages);
            // var unitList = eval("(" + data.list + ")");  //如果这里data是json对象，则会报错

            // 清空表格
            $("#dataList  tr:not(:first)").html("");

            // 在表格中添加数据
            for (var i = 0; i < unitList.length; i++) {
                $("#dataList").append(
                    "<tr>"
                    + "<td><input name='ids' type='checkbox'></td>"
                    + "<td>" + unitList[i].id + "</td>"
                    + "<td>" + unitList[i].userName + "</td>"
                    + "<td>" + unitList[i].address + "</td>"
                    + "<td>" + unitList[i].price + "</td>"
                    + "<td>" + unitList[i].createTime + "</td>"
                    + "<td>" + unitList[i].score + "</td>"
                    + "<td class='text-center'><button type='button'  class='btn bg-olive btn-sm' onclick=detailedInformation(" + JSON.stringify(unitList[i].id) + ")>详情</button></td>"
                    + " </tr>"
                );
            }
        }


        //根据条件筛选数据

        var conditionPrice = "";    //条件价格
        var conditionDate1 = "";    //开始日期
        var conditionDate2 = "";    //终止日期
        var conditionType = ""; //房屋类型
        var conditionScore1 = "";   //条件初始评分
        var conditionScore2 = "";  //条件终止评分
        $("#btnSearch").on("click", function () {


            //先获取内容
            conditionPrice = $("#price1").val();
            conditionDate1 = $("#inputDate1").val();
            conditionDate2 = $("#inputDate2").val();
            conditionType = $("#CustomersType").val();
            conditionScore1 = parseFloat($("#score1").val());
            conditionScore2 = parseFloat($("#score2").val());
            //先判断数据是否合法
            //处理时间函数

            //处理数据
            handleConditionMsg();
            //先ajax的post请求发送给后台存储
            var dataJson = {

                "price": conditionPrice,
                "date1": conditionDate1,
                "date2": conditionDate2,
                "type": conditionType,
                "score1": conditionScore1,
                "score2": conditionScore2,
                "status": 1
            }
            // console.log(dataJson);
            //发post请求
            $.ajax({
                url: "/parse/house/query",   //请求路径
                type: "post",    //请求方式，这里应该用post，返回给后台分页是数据：当前页，每页的大小
                data: JSON.stringify(dataJson),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",  //设置接收到数据类型
                success: function (data) {
                    console.log(data);
                    showTable(data);
                    // 处理分页数据
                    console.log("条件查询成功！");
                },    //成功
                error: function () {
                    console.log("条件查询信息失败...")
                }
            })
        });





        //处理函数
        function handleConditionMsg() {
            //处理价格
            if (conditionPrice === "") {
                conditionPrice = null;
            }
            //处理时间
            if (conditionDate1 !== "" && conditionDate2 !== "") {
                conditionDate1 = new Date(conditionDate1);
                conditionDate2 = new Date(conditionDate2);
            } else {
                conditionDate1 = null;
                conditionDate2 = null;
            }
            //处理公寓类型
            if (conditionType === "0") {
                conditionType = "全部";
            } else if (conditionType === "1") {
                conditionType = "普通住宅";
            } else if (conditionType === "2") {
                conditionType = "公寓";
            }
            //处理评分
            if (conditionScore1 !== "" && conditionScore2 !== "" &&
                !isNaN(conditionScore1) && !isNaN(conditionScore2) && conditionScore1 <= conditionScore2) {
                if (conditionScore1 <= 0) {
                    conditionScore1 = 0;
                }
                if (conditionScore2 >= 5) {
                    conditionScore2 = 5;
                }
            } else {
                conditionScore1 = null;
                conditionScore2 = null;
            }
        }
    });


    function detailedInformation(id) {
        console.log("调用了" + id);
        location.href = 'all-order-manage-edit.html?id=' + id;
    }


</script>

<script>
    $(function () {
        //初始化
        var ops = {
            language: 'zh-CN', //语言
            autoclose: true, //选择后自动关闭
            clearBtn: true,//清除按钮
            format: "yyyy-mm-dd",//日期格式
            startDate: "2020-06-10", //开始时间，在这时间之前都不可选
        };

        $("#inputDate1").datepicker(ops);
        $("#inputDate2").datepicker(ops);

        //第一个输入选中日期后设置第二给输入框的开始日期
        $("#inputDate1").datepicker().on("changeDate", function (e) {
            $("#inputDate2").datepicker('setStartDate', e.date);
        });
        $("#inputDate2").datepicker().on("changeDate", function (e) {
            $("#inputDate1").datepicker('setEndDate', e.date);
        });
    })
</script>

</body>

</html>